<template>
	<view id="integralSubsidiary">
		<Header txt="积分明细" v-if="baidu"></Header>
		<HeaderB txt="积分明细" v-if="!baidu"></HeaderB>
		<view class="bg" v-if="!sign_suss">
			<view class="text">
				我的积分
			</view>
			<view class="integral_detile_num">
				{{points}}
			</view>
			<view class="cont">
				<image src="https://iconimg.oss-cn-hangzhou.aliyuncs.com/%E7%86%8A%E7%8C%AB%E4%BB%A3%E7%90%86/%E5%9B%BE%E6%A0%87/%E7%A7%AF%E5%88%86%E6%98%8E%E7%BB%86log.png" mode="aspectFit"></image>
			</view>
			<view class="text text02" @click="sign_suss = true" v-if="!sign_suss">
				积分规则？
			</view>
		</view>
		<view class="integral_list_con" v-if="!sign_suss">
			<view v-for="(item, key) in tableData" :key="key" class="integral_list clearfix">
			    <view class="integral_list_left">
			      <view class="integral_list_left01">{{ item.remark }}</view>
			      <view class="integral_list_left02">{{ item.createTime }}</view>
			    </view>
			    <view class="integral_list_right">
			      <span v-if="item.channelType == 4" class="integral_list_right01">
			        {{ item.point }}
			      </span>
			      <span v-if="item.channelType != 4 &&item.point <0" class="integral_list_right02"
			        >{{ item.point }}</span
			      >
				  <span v-if="item.channelType != 4 &&item.point >0" class="integral_list_right02"
			        >+{{ item.point }}</span
			      >
			    </view>        
			</view>
		</view>
		<view class="jifen_my" v-if="sign_suss">
		    <view class="jifen_rules">
		      <view class="jifen_rules_text">
		        Q:积分可以用来做什么？
		        <br />A:积分可以在积分中心兑换不同的权益和商品，如：熊猫代理代金劵。使用后将扣除相应的积分
		      </view>
		      <view class="jifen_rules_text">
		        Q:获取积分的途径有哪些？
		        <br />做任务赠送积分，如：签到、充值钱包、邀请好友、实名认证等
		      </view>
		      <view class="jifen_rules_text">
		        Q:积分的有效期？
		        <br />A:积分具有时效性，周期为一年，有效期自获得该积分当日起至次年的同一时间，超期未使用则会清零
		      </view>
		      <view class="jifen_rules_text">
		        Q:积分是通过哪些方式发放？
		        <br />A:通过做任务获取积分，需自行到积分系统页面手动领取
		      </view>
		      <view class="jifen_rules_text">
		        Q:积分可以售卖吗？
		        <br />A:积分不可以交易、售卖、置换、转移以及折现
		      </view>
		      <view class="jifen_rules_text">
		        Q:可以通过不正当的手段来获取积分吗？
		        <br />A:请自觉遵守积分规则，一旦发现违反积分原则或者使用第三方工具、恶意作弊等与积分相关的违规行为，熊猫有权取消通过违规行为获取的积分，禁止用户参与活动，追回已兑换的福利类产品等。损失由您自行承担。
		      </view>
		    </view>    
		</view>
	</view>
</template>

<script>
	import {formatDate2} from "../../common/com.js"
	export default {
		data() {
			return {
				sign_suss: false,
				points: "",
				tableData: [],
				pageNum: 1,
			    baidu:true
			};      
		},
		onShow() {
			this.listPointsDetail()
			this.getUserPoints()
			// #ifdef MP-BAIDU
			this.baidu=false
			// #endif
		},
		onReachBottom(){
			this.listPointsDetail()	
		},
		methods: {
			listPointsDetail() {
				let that=this
				that.$store
					.dispatch("ListPointsDetail",{pageNum:this.pageNum})
					.then((response) => {
						let data = response.data;
						if (data.code == "0") {						
							let tar =response.data.obj.list
							tar.forEach((item) => {
							            item.createTime = formatDate2(item.createTime,2);
							          });
							that.tableData=[...that.tableData, ...tar];
							this.pageNum++
							if (tar.length ==7) {
								this.listPointsDetail()
							}
						}        
					})
			},
			getUserPoints(){
				let that=this
				that.$store
					.dispatch("GetUserPoints")
					.then((response) => {
						let data = response.data;
						if (data.code == "0") {
							that.points=data.obj
						}        
					})
			},
		},
	}
</script>

<style lang="less">
#integralSubsidiary{
	overflow: hidden;
	.jifen_my {
	    width: 90%;
	    margin: 0 auto;
	    margin-top: 30rpx;
		margin-top: 32rpx;
	    .jifen_rules {
	      font-size: 25rpx;
	      color: #666;
	      .jifen_rules_text {
	        margin-bottom: 40rpx;
	        line-height: 50rpx;
	      }
	    }
	  }
	.bg{
		width: 100%;
		height: 180rpx;
		text-align: center;
		line-height: 180rpx;
		color: #fff;
		background: url('https://iconimg.oss-cn-hangzhou.aliyuncs.com/%E7%86%8A%E7%8C%AB%E4%BB%A3%E7%90%86/%E5%9B%BE%E6%A0%87/%E7%A7%AF%E5%88%86%E6%98%8E%E7%BB%86%E8%83%8C%E6%99%AF.png');
		.cont{
			display: inline-block;
			width: 45rpx;
			height: 45rpx;
			vertical-align: sub;
			padding-left: 12rpx;
		}
		.text{
			display: inline-block;
			font-size: 38rpx;
			vertical-align: top;
		}
		.text02{
			font-size: 28rpx;
			color: #C0C0C0;
			padding-left: 12rpx;
		}
		.integral_detile_num{
			display: inline-block;
			font-size: 45rpx;
			font-weight: bold;
		}
		image{
			width: 100%;
			height: 100%;
		}
	}
	 .integral_list_con {
	    width: 90%;
	    margin: 0 auto;
	    .integral_list {
			width: 100%;
			overflow: hidden;
	      border-bottom: 2rpx solid #e5e5e5;
	    }
	    .integral_list_left {
	      float: left;
	      padding-top: 30rpx;
	      padding-bottom: 30rpx;
	      .integral_list_left01 {
	        font-size: 30rpx;
	        color: #222222;
	      }
	      .integral_list_left02 {
	        font-size: 25rpx;
	        color: #b6b6b6;
	        margin-top: 20rpx;
	      }
	    }
	    .integral_list_right {
	      float: right;
	      margin-top: 60rpx;
	      .integral_list_right01 {
	        font-size: 25rpx;
	        color: #06da79;
	        font-weight: bold;
	      }
	      .integral_list_right02 {
	        font-size: 25rpx;
	        color: #ff6b05;
	        font-weight: bold;
	      }
	    }
	}
}
</style>
